<template>
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelPosition="top">
        <view class="hidden-title">10KV顾宜线/檀树溪</view>
        <cu-cell-group>
          <uni-forms-item name="gyVoltage">
            <cu-cell title="电压(kv)" required :description="formData.gyVoltage">
              <input
                type="number"
                v-model="formData.gyVoltage"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="gyElectric">
            <cu-cell title="电流(A)" required :description="formData.gyElectric">
              <input
                type="number"
                v-model="formData.gyElectric"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="gyLoad">
            <cu-cell title="负荷(KW)" required :description="formData.gyLoad">
              <input
                type="number"
                v-model="formData.gyLoad"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="gyPowerFactor">
            <cu-cell title="10KV功率因数" required :description="formData.gyPowerFactor">
              <input
                type="number"
                v-model="formData.gyPowerFactor"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="gyMotorsNumber">
            <cu-cell title="共开高压电机(台)" required :description="formData.gyMotorsNumber">
              <input
                type="number"
                v-model="formData.gyMotorsNumber"
                placeholder="请输入数量"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="9"
              />
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <view class="hidden-title">主控室直流屏</view>
        <cu-cell-group>
          <uni-forms-item name="mainControlRoomVoltage">
            <cu-cell title="电压(kv)" required :description="formData.mainControlRoomVoltage">
              <input
                type="number"
                v-model="formData.mainControlRoomVoltage"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="mainControlRoomElectric">
            <cu-cell title="电流(A)" required :description="formData.mainControlRoomElectric">
              <input
                type="number"
                v-model="formData.mainControlRoomElectric"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="13"
              />
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <view class="background-white bor-top">
          <uni-forms-item name="productionSituation" label="生产情况">
            <textarea
              v-model="formData.productionSituation"
              class="text-area"
              placeholder="请输入"
              placeholder-class="form-placeholder__style"
              maxlength="100"
            />
          </uni-forms-item>
        </view>
        <view class="background-white">
          <uni-forms-item name="switchRoomSituation" label="各低压配电室">
            <textarea
              v-model="formData.switchRoomSituation"
              class="text-area"
              placeholder="请输入"
              placeholder-class="form-placeholder__style"
              maxlength="50"
            />
          </uni-forms-item>
        </view>
        <view class="background-white bor-bottom">
          <uni-forms-item name="motorBurnedSituation" label="电机烧毁">
            <textarea
              v-model="formData.motorBurnedSituation"
              class="text-area"
              placeholder="请输入"
              placeholder-class="form-placeholder__style"
              maxlength="50"
            />
          </uni-forms-item>
        </view>

        <view class="hidden-title">交接班事宜</view>
        <cu-cell-group>
          <uni-forms-item name="dutyUserId">
            <CuUserSelector label="值班人员" placeholder="选择人员" :required="true" v-model="formData.dutyUserId" />
          </uni-forms-item>
          <uni-forms-item name="dutyNextUserId">
            <CuUserSelector
              label="接班值班人员"
              placeholder="选择人员"
              :required="true"
              v-model="formData.dutyNextUserId"
            />
          </uni-forms-item>
        </cu-cell-group>

        <view class="submit" @click="handleSubmit">完成 </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import { add } from '@/api/duty-basic/duty-record.js'
import CuUserSelector from '@/components/CuUserSelector/index.vue'

const maxAndminValValidate = (min, max) => {
  return (rule, value, data, callback) => {
    if (value > max || value < min) {
      callback(`最小值为${min},最大值为${max}`)
    }
    return true
  }
}

export default {
  name: 'AddChangeShifts',
  data() {
    return {
      formData: {
        gyVoltage: '', // 电压
        gyElectric: '', // 电流
        gyLoad: '', // 负荷
        gyPowerFactor: '', // 10KV功率因数不能为空
        gyMotorsNumber: '', // 共开高压电机
        mainControlRoomVoltage: '', // 电压
        mainControlRoomElectric: '', // 电流
        productionSituation: '', // 生产情况
        switchRoomSituation: '正常', // 各低压配电室
        motorBurnedSituation: '正常', // 电机烧毁
        dutyUserId: this.$store.getters.staffId, // 值班人员
        dutyNextUserId: '' // 接班值班人员
      },
      rules: {
        gyVoltage: {
          rules: [
            {
              required: true,
              errorMessage: '电压不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 9999999999.99)
            }
          ]
        },
        gyElectric: {
          rules: [
            {
              required: true,
              errorMessage: '电流不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 9999999999.99)
            }
          ]
        },
        gyLoad: {
          rules: [
            {
              required: true,
              errorMessage: '负荷不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 9999999999.99)
            }
          ]
        },
        gyPowerFactor: {
          rules: [
            {
              required: true,
              errorMessage: '10KV功率因数不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 9999999999.99)
            }
          ]
        },
        gyMotorsNumber: {
          rules: [
            {
              required: true,
              errorMessage: '共开高压电机不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 999999999)
            }
          ]
        },
        mainControlRoomVoltage: {
          rules: [
            {
              required: true,
              errorMessage: '电压不能为空'
            },

            {
              validateFunction: maxAndminValValidate(0, 999999999)
            }
          ]
        },
        mainControlRoomElectric: {
          rules: [
            {
              required: true,
              errorMessage: '电流不能为空'
            },
            {
              validateFunction: maxAndminValValidate(0, 999999999)
            }
          ]
        },
        productionSituation: {
          rules: [
            {
              required: true,
              errorMessage: '生产情况不能为空'
            }
          ]
        },
        switchRoomSituation: {
          rules: [
            {
              required: true,
              errorMessage: '各低压配电室不能为空'
            }
          ]
        },
        motorBurnedSituation: {
          rules: [
            {
              required: true,
              errorMessage: '电机烧毁不能为空'
            }
          ]
        },
        dutyUserId: {
          rules: [
            {
              required: true,
              errorMessage: '值班人员不能为空'
            }
          ]
        },
        dutyNextUserId: {
          rules: [
            {
              required: true,
              errorMessage: '接班值班人员不能为空'
            }
          ]
        }
      }
    }
  },
  methods: {
    async handleSubmit() {
      await this.$refs.form.validate()
      await add({ ...this.formData })
      uni.showToast({
        title: '提交成功！',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.form.setRules(this.rules)
  },
  components: {
    CuCellGroup,
    CuCell,
    CuUserSelector
  }
}
</script>

<style lang="scss" scoped>
.submit {
  width: 600rpx;
  height: 88rpx;
  background: #454a5e;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 70rpx;
  margin-bottom: 70rpx;
}

.text-area {
  height: 300rpx;
}

::v-deep .is-direction-top .uni-forms-item__label {
  width: 100% !important;
}
</style>
